<script setup lang="ts">
import { onMounted } from "vue";
import { useHideCursor } from "@/utils/index";
import { themeStore } from '@/store/index'

onMounted(useHideCursor());

// Transition 与 KeepAlive 同时使用时
// 如果是从无缓存 - 有缓存页面的跳转，动画只会生效部分
// 如果跳转页面和当前页面都有缓存或者都无缓存，动画正常生效
</script>
<template>
  <!-- Vue-router 4 缓存配置 -->
  <RouterView v-slot="{ Component }">
    <n-config-provider :theme="themeStore().theme">
      <n-message-provider>
        <KeepAlive>
          <Transition :name="($route.meta.animatClass as string) || 'fade'" mode="out-in">
            <component :is="Component" v-if="$route.meta.isKeepAlive" />
          </Transition>
        </KeepAlive>

        <Transition :name="($route.meta.animatClass as string) || 'fade'" mode="out-in">
          <component :is="Component" v-if="!$route.meta.isKeepAlive" />
        </Transition>
      </n-message-provider>
    </n-config-provider>
  </RouterView>
</template>

<style scoped lang="scss">
// 导入路由动画样式文件
@import "@/dependent/animateStyle.scss";
</style>
